<!-- 我提交的-->
<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="loadMore"
  >
    <van-cell-group
      class="group-inset"
      v-for="(item, index) in dataList"
      :key="index"
      @click="to_detail(item)"
    >
      <van-cell title-style="min-width:70%;" :border="false">
        <template #title>
          <view class="card-title van-multi-ellipsis--l2">
            {{ item.formName }}
          </view>
        </template>
        <template #extra>
          <dict-tag dict-type="task_end_status" :value="item.formStatus" size="medium" />
        </template>
      </van-cell>
      <van-cell class="sub-title" center>
        <template #title>
          <view>{{ item.dataTitle }}</view>
          <view>开始时间: {{ dateFormat(item.startTime, 'YYYY-MM-DD HH:mm') }}</view>
          <view>结束时间: {{ dateFormat(item.endTime, 'YYYY-MM-DD HH:mm') }}</view>
          <view v-if="item.formStatus === ProcessResultEnum.PROCESSING">
            当前节点:<text class="margin-left-xs"> {{ item.nodeName }}</text>
          </view>
        </template>
        <template #extra>
          <van-button
            class="revoke-btn"
            plain
            hairline
            type="primary"
            round
            size="small"
            color="#0079fe"
            @click.stop="submitAgain(item)"
          >
            再次提交
          </van-button>
        </template>
      </van-cell>
    </van-cell-group>
  </van-list>
</template>

<script setup lang="ts">
  import { ref, watch, reactive } from 'vue';
  import { onPullDownRefresh } from '@dcloudio/uni-app';
  import { dateFormat } from '@/utils/dateUtils';
  import { TaskStatusEnum, ProcessResultEnum } from '@/enums/workFlowEnum';
  import { getMyStartedApi } from '@/api/workflow/task';
  import DictTag from '@/components/dict/dict-tag.vue';
  import { router } from '@/utils/router';
  import config from '@/utils/config';

  const props = defineProps({
    approveType: {
      type: String,
      default: TaskStatusEnum.STARTED,
    },
    code: {
      type: String,
      default: '',
    },
  });

  /** 查询条件 */
  const queryParams = reactive<WorkTask.TaskQuery>({
    title: '',
    userId: '',
    appId: '',
    formCode: '',
    startTime: '',
    endTime: '',
    status: '',
    pageNum: 1,
    pageSize: 10,
  });
  /** 数据列表 */
  const dataList = ref<WorkTask.MyStartedModel[]>([]);
  /** 加载状态 */
  const loading = ref(false);
  /** 加载完成 */
  const finished = ref(false);
  // 默认加载待我处理
  const loadType = ref(props.approveType);

  /** 下拉刷新 */
  onPullDownRefresh(() => {
    //判断只刷新当前页签的数据
    if (loadType.value === TaskStatusEnum.STARTED) {
      onRefresh();
    }
  });

  // 刷新
  const onRefresh = () => {
    // 清空列表数据
    dataList.value = [];
    finished.value = false;
    // 默认加载第一页
    queryParams.pageNum = 1;
    // 加载数据
    getList();
  };

  /** 加载更多 */
  const loadMore = () => {
    if (dataList.value.length == 0) {
      queryParams.pageNum = 1;
    } else {
      queryParams.pageNum++;
    }
    loading.value = false;
    getList();
  };

  /** 加载数据 */
  const getList = () => {
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    // 待我处理
    getMyStartedApi(queryParams).then(({ data }) => {
      loading.value = false;
      // 第一页直接赋予，其他页追加
      if (queryParams.pageNum === 1) {
        dataList.value = data.list;
      } else {
        data.list.forEach((t) => dataList.value.push(t));
      }
      // 判断当前页是否为最后一页
      if (queryParams.pageNum * queryParams.pageSize > data.total) {
        finished.value = true;
      }
      uni.stopPullDownRefresh();
    });
  };

  /** 跳转详情 */
  const to_detail = (form: WorkTask.MyStartedModel) => {
    const code = form.formCode;
    const procInstId = form.procInstId;
    router.push(config.route.process_render + '?code=' + code + '&instanceId=' + procInstId);
  };

  /** 再次提交 */
  const submitAgain = (form) => {
    router.push(
      config.route.process_initiation + '?procInstId=' + form.procInstId + '&code=' + form.formCode,
    );
  };

  /** 监听页签数据变化 */
  watch(
    () => props.approveType,
    (newValue) => {
      if (newValue !== loadType.value) {
        loadType.value = newValue;
        if (loadType.value === TaskStatusEnum.STARTED) {
          onRefresh();
        }
      }
    },
  );
</script>

<style scoped lang="scss">
  .van-cell-group {
    padding: 20rpx;
  }
  .van-cell {
    padding: 6rpx 8rpx;
  }
  .sub-title {
    color: #787878;
    font-size: 28rpx;
  }
  .card-title {
    color: $uni-text-color;
    font-weight: 600;
  }
  .status {
    color: #56b77a;
    font-weight: 600;
  }

  .group-inset {
    margin: 20rpx 20rpx;
    border-radius: 32rpx;
  }
  .process-info {
    margin: 8rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .user-info {
      display: flex;
      align-items: center;
    }
  }
</style>
